<template>
  <el-container>
    <!-- <el-header></el-header> -->
    <el-row class="outter-wrapper">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>安全中心</span>
        </div>
        <div class="text item">
          <!-- form表单 -->
          <el-form ref="form" :model="form" :rules="rule" label-width="100px">
            <el-form-item label="Email：">
              <el-input
                v-model="form.name"
                disabled
                placeholder="xxx@xxx.com-同当前登录账户"
              ></el-input>
              <p class="tip-info">
                <small>通过邮箱接收验证码,完成密码修改</small>
              </p>
            </el-form-item>
            <el-form-item label="新密码：" prop="newpswd">
              <el-input v-model="form.newpswd"></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" prop="checkpswd">
              <el-input v-model="form.checkpswd"></el-input>
            </el-form-item>
            <el-form-item label="" prop="verifycode">
              <el-row>
                <el-col :span="12">
                  <el-input
                    v-model="form.verifycode"
                    placeholder="请输入验证码"
                  ></el-input>
                </el-col>
                <el-col :span="12">
                  <el-button
                    type="primary"
                    round
                    class="el-button-sendcode"
                    @click="sendVerifyCode"
                    >点击发送验证码</el-button
                  >
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="onSubmit">确认修改</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-row></el-container
  >
</template>

<script>
import * as IndexService from '@/service/index/indexService'
import * as SendService from '@/service/send/sendService'
export default {
  name: 'safeCenter',
  data() {
    return {
      form: {
        name: '',
        newpswd: '',
        checkpswd: '',
        verifycode: '',
      },
      rule: {
        newpswd: [
          { required: true, message: '请设置账户密码', trigger: 'blur' },
          {
            min: 6,
            max: 12,
            message: '长度在 6 到 12 个字符',
            trigger: 'blur',
          },
        ],
        checkpswd: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请确认输入密码'))
              } else if (value !== this.form.newpswd) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
          {
            min: 6,
            max: 12,
            message: '长度在 6 到 12 个字符',
            trigger: 'blur',
          },
        ],
        verifycode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
      },
    }
  },
  mounted() {
    //更新用户名
    let email = localStorage.getItem('email')
    this.form.name = email ? email : 'xxx@xxx.com'
  },
  methods: {

    sendVerifyCode() {
      //发送验证码
      SendService.sendVerifyCode(this.form.name).then((res) => {
          if (res.data) {
            this.$message({
              message: '验证码已发送!',
              type: 'success',
            })
          } else {
            this.$message.error('验证码发送失败!')
          }
        })
        .catch((err) => {
          // console.log(err)
          this.$message.error('验证码发送失败!')
        })
    },
    //提交信息
    onSubmit() {
      // console.log('submit!')
      let info = {
        email: this.form.name,
        pswd: this.form.newpswd,
        checkpswd: this.form.checkpswd,
        verifycode: this.form.verifycode,
      }
      IndexService.modifyPassword(info).then((res) => {
        if (res.data) {
          //判断并做出响应
          switch (res.data) {
            case -3: {
              this.$message.error('未知错误，请稍后再试!')
              break
            }
            case -2: {
              this.$message.error('验证码错误!')
              break
            }
            case -1: {
              this.$message.error('两次输入密码不一致!')
              break
            }
            case 0: {
              this.$message.error('提交信息不完整!')
              break
            }
            case 1: {
              this.$message({
                message: '密码修改成功!',
                type: 'success',
              })
              break
            }
            default:
              break
          }
        }
      }).catch(err=>{
        this.$message.error("修改密码失败!")
      })
    },
  },
}
</script>
<style scoped>
.outter-wrapper{
  padding-top: 50px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.el-row {
  margin: 0 auto;
}

.box-card {
  width: 480px;
}
.el-card__header span {
  color: #409eff;
  font-weight: 700;
}
.box-card:hover {
  /* width: 480px; */
  box-shadow: 0 5px 15px 0 rgb(0 0 0 / 30%);
}
.el-button-sendcode {
  background-color: #17a2b8;
}
.tip-info {
  text-align: left;
  color: blue;
}
</style>
